<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建新习惯 - 嘀嗒</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        tailwind.config = {
            // darkMode: 'class', // Disable dark mode by default
            theme: {
                extend: {
                    colors: {
                        'primary': '#10B981',
                        'primary-focus': '#059669',
                        'base-100-light': '#FFFFFF',
                        'base-content-light': '#1F2937',
                        'neutral-light': '#F3F4F6', // page background
                        'input-bg-light': '#FFFFFF',
                        'input-border-light': '#D1D5DB', // gray-300
                        'text-muted-light': '#6B7280', // gray-500
                        'icon-selector-bg-light': '#E5E7EB' // gray-200
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #F3F4F6; /* neutral-light */
            color: #1F2937; /* base-content-light */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .icon-selector .icon-option {
            width: 40px; height: 40px;
            border: 2px solid transparent;
            transition: all 0.2s ease-in-out;
        }
        .icon-selector .icon-option:hover {
            background-color: #D1D5DB; /* gray-300 */
        }
        .icon-selector .icon-option.selected {
            border-color: #10B981; /* primary */
            background-color: #10B98133; /* primary with opacity */
            box-shadow: 0 0 0 2px #10B981;
        }
        input[type="time"]::-webkit-calendar-picker-indicator {
            /* filter: invert(0.8); // Removed for light theme */
        }
    </style>
</head>
<body class="antialiased flex flex-col bg-neutral-light text-base-content-light">

    <header class="p-4 sticky top-0 bg-base-100-light z-10 shadow-sm flex items-center justify-between border-b border-input-border-light">
        <button onclick="document.location.href='home_habits.html'" class="text-text-muted-light hover:text-primary">
            <i class="fas fa-times text-xl"></i>
        </button>
        <h1 class="text-xl font-semibold text-base-content-light">创建新习惯</h1>
        <button onclick="document.location.href='home_habits.html'" class="text-primary hover:text-primary-focus font-semibold">
            保存
        </button>
    </header>

    <main class="flex-grow p-4 overflow-y-auto space-y-6">
        <!-- Habit Name -->
        <section>
            <label for="habit-name" class="block text-sm font-medium text-text-muted-light mb-1">习惯名称</label>
            <input type="text" id="habit-name" placeholder="例如：晨间阅读" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
        </section>

        <!-- Habit Icon & Color (Simplified to Icon for now) -->
        <section>
            <label class="block text-sm font-medium text-text-muted-light mb-1">选择图标</label>
            <div class="icon-selector grid grid-cols-6 gap-3 bg-icon-selector-bg-light p-3 rounded-lg">
                <button class="icon-option selected rounded-md flex items-center justify-center text-xl text-orange-500"><i class="fas fa-mug-hot"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-blue-500"><i class="fas fa-book-open"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-green-500"><i class="fas fa-person-running"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-purple-500"><i class="fas fa-brain"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-yellow-500"><i class="fas fa-guitar"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-pink-500"><i class="fas fa-palette"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-teal-500"><i class="fas fa-seedling"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-red-500"><i class="fas fa-heartbeat"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-indigo-500"><i class="fas fa-moon"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-gray-500"><i class="fas fa-dumbbell"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-cyan-500"><i class="fas fa-laptop-code"></i></button>
                <button class="icon-option rounded-md flex items-center justify-center text-xl text-lime-500"><i class="fas fa-apple-alt"></i></button>
            </div>
        </section>

        <!-- Repetition Cycle -->
        <section>
            <label class="block text-sm font-medium text-text-muted-light mb-1">重复周期</label>
            <select class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
                <option>每日</option>
                <option>仅工作日 (周一至周五)</option>
                <option>仅周末 (周六、周日)</option>
                <option>每周一</option>
                <option>自定义...</option>
            </select>
        </section>

        <!-- Reminder Time -->
        <section>
            <label for="reminder-time" class="block text-sm font-medium text-text-muted-light mb-1">提醒时间</label>
            <input type="time" id="reminder-time" value="08:00" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
        </section>

        <!-- Habit Goal (Optional) -->
        <section>
            <label for="habit-goal" class="block text-sm font-medium text-text-muted-light mb-1">每日目标 (可选)</label>
            <input type="text" id="habit-goal" placeholder="例如：喝水8杯，冥想15分钟" class="w-full bg-input-bg-light border border-input-border-light text-base-content-light rounded-lg p-3 focus:ring-primary focus:border-primary shadow-sm">
        </section>
        
        <!-- Image from Pexels: https://www.pexels.com/photo/close-up-shot-of-a-target-board-8532616/ -->
        <img src="https://images.pexels.com/photos/8532616/pexels-photo-8532616.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Target board" class="w-full h-32 object-cover rounded-lg mt-4 opacity-75 shadow-sm">

        <div class="mt-8">
            <button class="w-full bg-red-100 hover:bg-red-200 text-red-600 font-semibold py-3 px-4 rounded-lg transition duration-150 shadow-sm">
                <i class="fas fa-trash-alt mr-2"></i> 删除习惯 (编辑时显示)
            </button>
        </div>

    </main>

    <script>
        const iconOptions = document.querySelectorAll('.icon-selector .icon-option');
        iconOptions.forEach(option => {
            option.addEventListener('click', () => {
                iconOptions.forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
            });
        });
    </script>

</body>
</html>